<!DOCTYPE html>
<!--[if IE 7]>    <html class="no-js ie7 ie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 ie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
		<meta charset="utf-8" />
		<title>技术问答_${webName}</title>
		<meta name="description" content="" />
		<meta name="author" content="HuangBQ | ${wwwRoot}" />
		<#include "../inc/head-common.ftl">
		<#include "../inc/wysiwyg.ftl">
	</head>
	<body>
		<#include "../inc/header.ftl">
		
		<!-- Main content -->
		<div class="container" role="main">
		
			<!-- Breadcrumbs -->
			<ul class="breadcrumb">
				<li><a href="${wwwRoot}"><span class="icon-home"></span> ${wwwName}</a></li>
				<li><a href="${webRoot}">${webName}</a></li>
				<li><a href="${webRoot}qa.do">技术问答</a></li>
				<li class="active">${aq.question}</li>
			</ul>
			<!-- Breadcrumbs -->
			
			<!-- Main data container -->
			<div class="content">
			
				<!-- Page header -->
				<div class="page-header">
					<h1><span class="icon-question-sign"></span> 技术问答 <small>一般问题1小时内会得到专家回复，最慢4小时</small></h1>
					<ul class="page-header-actions">
						<li><a href="#typography" class="btn pull-right btn-wuxia" title="分享这个问题到朋友圈" target="_blank"><span class="icon-share"></span> 分享给朋友</a></li>
					</ul>
				</div>
				<!-- /Page header -->
				
				<!-- Page container -->
				<div class="page-container">
				
					<!-- Grid row -->
					<div class="row">
					
						<article class="span8">

							<h3>问题：${aq.question}</h3>
							<p><span class="fam-user"></span><a href="#">${aq.username}</a> <i>问于${aq.createtime}</i>  &nbsp;&nbsp;  共 ${aq.answers?size} 回复   &nbsp;&nbsp;&nbsp;&nbsp;  
							<#if aq.status==1>
								<span class="fam-accept"></span> 已解决
							</#if>
								
							<#if aq.status!=1>
								    &nbsp;&nbsp;<span class="fam-key"></span> 讨论中
								<#if aq.uid==Session["dw_uid"]>
								      <#if aq.answers?size lte 0>
								        <span class="tooltip-options">[<a href="${webRoot}qa/solve.do?qid=${aq.qid}&uid=${aq.uid}" title="&lt;h5&gt;若已解决，分享方案给小伙伴们吧&lt;/h5&gt;">设为已解决</a>]	</span>
								      <#else>
								        <span class="tooltip-options">[<a href="${webRoot}qa/solve.do?qid=${aq.qid}&uid=${aq.uid}">设为已解决</a>]	</span>
								      </#if>
								</#if>
							</#if>					
								
							</p>

							<p>${aq.description}</p>
							
							<p>&nbsp;</p>
							<p>
							<span class="fam-control-repeat-blue"></span>相关课件：
							<#if aq.url=="#">
								${aq.contentname}
							<#else>
							    <a href="${webRoot}${aq.url}" target="_blank">${aq.contentname}</a> 
							</#if>
							&nbsp;&nbsp;&nbsp;&nbsp; 标签：
							<#if aq.tags?length gt 0>
								${aq.tags}
							<#else>
								MapReduce, Yarn, HDFS
							</#if>
							</p>
							<p>&nbsp;</p>
							<#list aq.answers as an>
								<h3>${an_index+2}# 
								<#if an.username=="小讲">
									<span class="fam-rosette"></span>
								</#if>
								 ${an.username}</h3>
								<blockquote>
								    <input type="hidden" class="an_index" value="${an_index+2}"/>
									<p>${an.answer}</p>
									<p>&nbsp;</p>
									<small>${an.createtime}回复    &nbsp;&nbsp; ${an.approvers}  <span>${an.approvenum}</span>人点 赞&nbsp;&nbsp;<span onclick="praise(${an.aid},this);" class="icon-thumbs-up" style="cursor:pointer;"></span></small>
								</blockquote>
							</#list> 
							<form id="answer-form"/>
									<fieldset>
										<div class="control-group">
											<label class="control-label">我来回复此问题</label>
											<div class="controls">
											    <input type="hidden" name="qid" value="${aq.qid}"/>
												<textarea id="editor" name="answer"  placeholder="快点帮帮苦命的小伙伴吧 ，在此回复..." rows="8"></textarea>
											</div>
										</div>
										<div class="form-actions" id="form-actions">
										    <button class="btn btn-primary btn-wuxia btn-large" id="submitanswer" type="button">提交回复</button>
										    <input type="reset" id="reset" value="Reset form!" style="display:none;">
										</div>
									</fieldset>
							</form>
						</article>
						
						<article class="span4">
							<div class="well">
								<a href="#answer-form" class="btn btn-wuxia btn-success">我来回答这个问题</a>
								<a href="${webRoot}qa/post.do" class="btn btn-wuxia btn-danger"><span class="icon-question-sign"></span> 我有新问题要问</a>
							</ul>
							</div>
						</article>
						
						<article class="span4">
							<h3>相关问题</h3>
							<div class="well">
								<ul class="unstyled" id="relatedQuestion">
								</ul>
							</div>
							<h3>扩展学习</h3>
							<div class="well">
								<ul class="unstyled" id="related">
								</ul>
							</div>
						</article>
					</div>
					<!-- /Grid row -->
					
				</div>
				<!-- /Page container -->
				
			</div>
			<!-- /Main data container -->
			
		</div>
		<!-- /Main content -->
		
		<#include "../inc/footer.ftl">
		<script>
		    an_index = ${aq.answers?size+1};
			$(document).ready(function() {
					/*提交表单*/
					$('#submitanswer').click(function(){
					       submitForm();
					});
					/*获取扩展文章列表*/
					relateExtension();
					/*获取相关问题列表*/
					relateQuestion();
					$(".tooltip-options a").tooltip({html : true });
			});
			/*异步获取相关文章列表*/
			function relateQuestion(){
				      var ajax_url = '${webRoot}qa/relatedList.do';/*表单地址*/
				      var ajax_type = 'POST';/*表单提交类型*/
				      var tags="${aq.tags}";
				      jQuery.ajax( {  
				           type : ajax_type,  
				           url : ajax_url,  
				           data : {tags:tags,uid:${aq.uid}},  
				           dataType : 'json',  
				           success : function(data) { 
				                var $ul = $('#relatedQuestion');
				                $ul.empty();
				           	   	$.each(data,function(index, item) {
				           	   	    var $li=$('<li><a href="${webRoot}qa/'+item.qid+'.do" target="_blank"><span class="icon-ok"></span>'+item.question+'</a></li>');
				           	   	    $ul.append($li);
				           	   	})
				           },  
				           error : function(data) {  
				            // alert("error:" + data)  
				           }  
				      });
			}
			/*异步获取相关问题列表*/
			function relateExtension(){
				      var ajax_url = '${webRoot}ext/relatedList.do';/*表单地址*/
				      var ajax_type = 'POST';/*表单提交类型*/
				      var tags="${aq.tags}";
				      jQuery.ajax( {  
				           type : ajax_type,  
				           url : ajax_url,  
				           data : {tags:tags,uid:${aq.uid}},  
				           dataType : 'json',  
				           success : function(data) { 
				                var $ul = $('#related');
				                $ul.empty();
				           	   	$.each(data,function(index, item) {
				           	   	    var $li=$('<li><a href="${webRoot}ext/'+item.eid+'.do" target="_blank"><span class="icon-ok"></span>'+item.title+'</a></li>');
				           	   	    $ul.append($li);
				           	   	})
				           },  
				           error : function(data) {  
				            // alert("error:" + data)  
				           }  
				      });
			}
			/*提交表单*/
			function submitForm(){
						 var flag = checkForm();
					      if(flag==false){
					          $('#submitanswer').pops({title:'', text:'请准备好你的答案！',type:'error',top:10, left:120, showClose : false,timeout:3000});
					         return false;
					      }
					      clearTextArea();//清空TextArea
					      var ajax_url = '${webRoot}qa/add/answer.do';/*表单地址*/
					      var ajax_type = 'POST';/*表单提交类型*/
					      var ajax_data = $("#answer-form").serialize();/*表单数据*/
					      jQuery.ajax( {  
					           type : ajax_type,  
					           url : ajax_url,  
					           data : ajax_data,  
					           dataType : 'json',  
					           success : function(data) { 
					           	if(data != null) {
					           	    var $last=$('#answer-form');
					           	    an_index = an_index+1;
					           	    var $h=$('<h3>'+an_index+'# '+data.username+'</h3>');
					           	    var $blockquote = $('<blockquote><p>'+data.answer+'</p><p>&nbsp;</p><small>'+timeStamp2String(data.createtime.time)+'回复    &nbsp;&nbsp; <span>0</span>人点 赞&nbsp;&nbsp;<span onclick="praise('+data.aid+',this);"  class="icon-thumbs-up" style="cursor:pointer;"></span></small></blockquote>');
					           		$last.before($h);
					           		$last.before($blockquote);
					           		$("input[type=reset]").trigger("click");/*重置表单数据*/
					           		$('#submitanswer').pops({title:'', text:'感谢你的参与！',type:'success',top:10, left:120, showClose : false,timeout:3000});
					           	} else {
					           		$('#submitanswer').pops({title:'', text:'答案提交失败，请重试！',type:'error',top:10, left:120, showClose : false,timeout:3000});
					           	}		       
					           },  
					           error : function(data) {  
					             //alert("error:" + data)  
					           }  
					      });
			}
		    /*js解决通过json传来的timestamp类型时间的显示问题    time即是timestamp中的time属性的值*/
		    function timeStamp2String(time){
					    var datetime = new Date();
					    datetime.setTime(time);
					    var year = datetime.getFullYear();
					    var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
					    var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
					    var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
					    var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
					    var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
					    return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
			}
		    /*表单地址*/
			function checkForm(){
			     var flag = true;
			     var answer = $.trim($('#editor').val());
			     if(answer==""){
			         flag = false;
			     }
			     return flag;
			}
			/*给回复点赞*/
			function praise(aid,obj){
			   var praise=$(obj).attr("class");
			   var index = praise.indexOf("fam")
			   if(index<0){
			   	   var arr = praise.split("-");
			       $(obj).attr("class","fam-thumb-"+arr[2]);
			       var supportnum = parseInt($(obj).prev().html());
			       $(obj).prev().html(supportnum+1);
			       support(aid,obj); /*添赞*/
			       $(obj).pops({title:'', text:'感谢投票！',top:25, left:0, showClose : false,timeout:400});
			   }
			}
			
			function support(aid){
			          var ajax_url = '${webRoot}qa/answer/support.do';/*表单地址*/
				      var ajax_type = 'POST';/*表单提交类型*/
				      jQuery.ajax( {  
				           type : ajax_type,  
				           url : ajax_url,  
				           data : {aid:aid},  
				           dataType : 'json',  
				           success : function(data) {        
				           },  
				           error : function(data) {  
				             //alert("error:" + data)  
				           }  
				      });
			}
		</script>
		<script src="${scriptRoot}pops.js" type="text/javascript"></script>
</body>
</html>
